<!DOCTYPE html>
<html lang="en" ng-app="prodList">
<head>
    <meta charset="utf-8">
    <title>product-list</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-">
    <!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/favicon.ico" rel="SHORTCUT ICON" type="image/ico">

    <!-- Fonts START -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"
          type="text/css">
    <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all" rel="stylesheet" type="text/css">
    <!-- Fonts END -->

    <!-- Global styles START -->
    <link href="resources/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="resources/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="resources/assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <!-- for slider-range -->
    <link href="resources/assets/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
    <link href="resources/assets/plugins/rateit/src/rateit.css" rel="stylesheet" type="text/css">
    <link href="resources/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <!-- Page level plugin styles END -->

    <!-- Theme styles START -->
    <link href="resources/assets/css/style-metronic.css" rel="stylesheet" type="text/css">
    <link href="resources/assets/css/style.css" rel="stylesheet" type="text/css">
    <link href="resources/assets/css/style-responsive.css" rel="stylesheet" type="text/css">
    <link href="resources/assets/css/custom.css" rel="stylesheet" type="text/css">
    <!-- Theme styles END -->
    <script src="http://cdn.bootcss.com/angular.js/1.6.1/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.6.1/angular-resource.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.6.1/angular-route.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.6.1/angular-animate.min.js"></script>
    <script type="text/javascript" src="product.js"></script>
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body>

<div class="main" ng-controller="prodLs">
    <div class="container">
        <div class="row margin-bottom-40">
            <div class="row">
                <div class="col-sm-4">
                    <input ng-model="query" type="search" class="form-control" placeholder="请输入查询值">
                </div>
                <div class="col-sm-4">
                    <select ng-model="orderByPro" class="form-control">
                        <option value="proName">商品名称</option>
                        <option value="proNowPrice">商品现价</option>
                    </select>
                </div>
            </div>

            <!-- BEGIN CONTENT -->
            <div class="col-md-9 col-sm-7">
                <!-- BEGIN PRODUCT LIST -->
                <div class="row product-list">
                    <div class="col-md-4 col-sm-6 col-xs-12" ng-repeat="prod in prods | filter:query | orderBy:orderByPro">
                        <div class="product-item">
                            <div class="pi-img-wrapper">
                                <img src="{{prod.proPicUri}}" class="img-responsive" alt="{{prod.proName}}"/>
                            </div>
                            <h3><a href="#">{{prod.proName}}</a></h3>

                            <div class="pi-price">${{prod.proNowPrice}}</div>
                            <a href="{{prod.proId}}" class="btn btn-default add2cart">添加购物车</a>
                        </div>
                    </div>
                </div>
                <!-- END PRODUCT LIST -->
                <!-- BEGIN PAGINATOR -->
                <div class="row">
                    <div class="col-md-4 col-sm-4 items-info">Items 1 to 9 of 10 total</div>
                    <div class="col-md-8 col-sm-8">
                        <ul class="pagination pull-right">
                            <li><a href="#">&laquo;</a></li>
                            <li><a href="#">1</a></li>
                            <li><span>2</span></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                </div>
                <!-- END PAGINATOR -->
            </div>
            <!-- END CONTENT -->
        </div>
        <!-- END SIDEBAR & CONTENT -->
    </div>
</div>


<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="resources/assets/plugins/respond.min.js"></script>
<![endif]-->
<script src="//cdn.bootcss.com/angular.js/1.6.1/angular.min.js"></script>
<script src="resources/assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="resources/assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="resources/assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="resources/assets/plugins/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
<script type="text/javascript" src="resources/assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="resources/assets/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script src="resources/assets/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>
<script type="text/javascript" src='resources/assets/plugins/zoom/jquery.zoom.min.js'></script>
<!-- product zoom -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- for slider-range -->
<script src="resources/assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="resources/assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<!-- Quantity -->
<script type="text/javascript" src="resources/assets/scripts/app.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        App.init();
        App.initBxSlider();
        App.initImageZoom();
        App.initSliderRange();
        App.initUniform();
        App.initTouchspin();
    });
</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>